const token = window.localStorage.getItem('bignew_token')
// 一进到这个文章类别页面 就要显示所有的文章类别
function getCategory() {
    //添加令牌

    //1、发送ajax请求获取所有文章类别
    $.ajax({
        headers: {
            'Authorization': token
        },
        type: "get",
        url: "http://localhost:8080/api/v1/admin/category/list",

        success: function (response) {
            // console.log(response);

            // 通过模板引擎的方式渲染到页面上
            if (response.code === 200) {
                const htnlStr = template('category', response)
                $('tbody').html(htnlStr)
            }
        }
    });
}
getCategory()


// 删除文章类别

function deleteCategory() {
    // 删除按钮是动态生成的 所以要事件委托给父级 注册委托事件
    $('tbody').on('click', '.btn-delete', function () {
        if (confirm('你确定要删除吗')) {
            const btnId = $(this).attr('data-id')
            request({
                type: "post",
                url: "/admin/category/delete",
                data: { id: btnId },
                success: function (response) {
                    if (response.code === 204) {
                        alert('删除成功')
                        //更新数据
                        getCategory()
                    }
                }
            });
        }
    })
}


// 新增按钮和编的模态框是同一个
// 模态框的里面的新增和编辑按钮不同,要判断到底是分类/编辑按钮  来弹出模态框
// show.bs.modal 这个是在模态框显示的时候立即触发该事件。
// 如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。

// 给模态框注册事件
$('#myModal').on('show.bs.modal', function (e) {
    // console.log(e.relatedTarget);
    // 判断如果 e.relatedTarget(bootstrap里面的方法) === 新增按钮就把按钮文字改成新增分类 否则就改成编辑分类
    if (e.relatedTarget === $('#xinzengfenlei')[0]) {
        $('#myModalLabel').text('新增分类')
        $('#increase').text('新增').addClass('btn-primary').removeClass('btn-success')
    } else {
        $('#myModalLabel').text('编辑分类')
        $('#increase').text('编辑').addClass('btn-success').removeClass('btn-primary')

        // 编辑第一步
        // 把需要编辑的当前这一行的文章类别名称和别名 显示在模态框中
        $('#recipient-name').val($(e.relatedTarget).parent().prev().prev().text().trim()) // input的父亲的兄弟的兄弟的text值  e.relatedTarget能获取到是 新增还是编辑  在else里是编辑 需要把原来e.relatedTarget DOM对象转成$(e.relatedTarget) jq对象
        $('#message-text').val($(e.relatedTarget).parent().prev().text().trim())
        $('#categoryId').val($(e.relatedTarget).attr('data-id')) // attr()自定义属性

    }
})

// 给模态框中的 新增/编辑 按钮设置点击事件
function showCategory() {
    $('#increase').on('click', function () {
        //判断是点的新增还是点的编辑  用类 类要在上面添加或移出类
        if ($(this).hasClass('btn-primary')) {
            //新增
            // alert('新增')
            // 获取分类名称的值
            const name = $('#recipient-name').val().trim()
            const slug = $('#message-text').val().trim()
            // 发送ajax 请求
            request({
                type: 'post',
                url: '/admin/category/add',
                data: { name, slug },

                success: function (response) {
                    // console.log(response);
                    if (response.code === 201) {
                        alert(response.msg)
                        //更新页面数据
                        getCategory()

                        // 隐藏模态框
                        $('#myModal').modal('hide')
                        //清空模态框的输入内容
                        $('#recipient-name').val('')
                        $('#message-text').val('')
                    }
                },

            })

        } else {
            //编辑
            //编辑的第二步
            // 获取编辑模态框的值 还有id值
            // const categoryName = $('#recipient-name').val().trim()
            // const categorySlug = $('#message-text').val().trim()
            // const categoryId = $('#categoryId').val().trim()

            // fromData也可以获取所有表单的值 但是需要有后台数据才能使用 没有这个方法的接口不能使用
            // serialize()可以获取from表单中带有name 属性 的标签的值  html那边要加name属性 ="data里的数据"  serialize()是jq 的方法
            const data = $('#myModal form').serialize()
            console.log(data);
            request({
                type: 'post',
                url: '/admin/category/edit',
                // 传过去的数据
                data: data,

                success: function (response) {
                    console.log(response);
                    if (response.code === 200) {
                        alert(response.msg)
                        //更新页面数据
                        getCategory()

                        // 隐藏模态框
                        $('#myModal').modal('hide')
                        //清空模态框的输入内容
                        $('#recipient-name').val('')
                        $('#message-text').val('')
                    } if (response.code === 400) {
                        alert(response.msg)
                    }
                },

            })
        }
    })
}
showCategory()


